<template>
    <div class="container" @click="handleclick">
        <img :src="movie.imageUrl" alt="">
        <p>{{movie.title}}</p>
    </div>
</template>
<script>
export default {
    name:"movieItem",
    props:{
        movie:{
            type:Object
        }
    },
    methods:{
        handleclick(){
            this.$emit("jump",this.movie.id)
        }
    }
}
</script>
<style lang="scss" scoped>
  .container{
      width:172px;
      box-shadow: 0 0 5px 3px rgba(51,51,51, 0.21);
      margin-top: 10px;
      margin-left: 10px;
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .container img{
      width:160px;
      height: 230px;
  }
  .container p{
      font-size: 14px;
  }
</style>